
<template>
  <!-- 头部组件 -->
  <div class="header">
    <div class="headerTop">
      <!-- 定位 -->
      <a href="#/location" class="location">
        <!-- 定位图标 -->
        <i class="el-icon-s-promotion"></i>
        {{this.$store.state.city}}
      </a>
      <!-- 搜索框 -->
      <div>
        <p>
          <input type="text" class="headerinput" placeholder="搜索演出" @input="search" v-model="input" />
          <span class="el-icon-search"></span>
        </p>

        <div
          v-for="(item,index) in actor"
          :key="index"
          class="search"
          :class="{hidden:hidden}"
          id="search"
          @click="toDetail(item.id)"
        >{{item.name}}</div>
      </div>
      <!-- 用户 -->
      <a href="#/user" class="user">
        <span v-if="this.$store.state.isOnline">
          <img :src="src" class="img" />
        </span>
        <span v-else class="el-icon-s-custom"></span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      src: "",
      input: "",
      hidden: true,
      actor: [],
    };
  },
  mounted() {
    if (this.$store.state.name) {
      this.axios.get("/user?username=" + this.$store.state.name).then((res) => {
        let img = res.data.result[0].pic;
        this.src = require("../assets" + img);
      });
    }
  },
  methods: {
    search() {
      let text = this.input.replace(/\s*/g, "");
      if (text) {
        this.hidden = false;
        this.axios.get("/search?text=" + text).then((res) => {
          this.actor = res.data.result;
          if (this.actor == undefined) {
            this.actor = [{ name: res.data.msg, id: 0 }];
          }
        });
      } else {
        this.hidden = true;
      }
    },
    toDetail(val) {
      this.hidden = true;
      if (val != 0) {
        this.$store.commit("setId", val);
        location.href = "#/detail";
      }
    },
  },
};
</script>


<style scoped>
/* 头部样式 */
.header {
  background-color: #f5f5f5;
  padding: 15px 0 10px 0;
  height: calc(6vw + 30px);
}
/* 搜索框去边框 宽度自适应 */
.headerinput {
  border: 0;
  width: calc(94vw - 180px);
}
/* 搜索框去轮廓 */
.headerinput:focus {
  outline: 0;
}
/* 溢出隐藏 */
.header .headerTop {
  overflow: hidden;
}
/* 图标靠左 */
.header .headerTop a {
  float: left;
  line-height: 6vw;
}
/* 搜索框相关 */
.header .headerTop > div {
  margin-left: 10px;
  float: left;
  width: calc(94vw - 132px);
  border: 1px solid;
  border-radius: 15px;
  background-color: white;
}
/* 搜索内容 */
.header .headerTop .search:nth-child(2) {
  border-top: solid #666;
}
.hidden {
  display: none;
}
.header .headerTop .search {
  white-space: nowrap; /*规定文本不换行**/
  text-overflow: ellipsis; /**显示省略符号来代表被修剪的文本。*/
  overflow: hidden;
  margin: 0 10px;
  clear: both;
  line-height: 24px;
  text-align: left;
}
.header .headerTop p {
  float: left;
  border-radius: 15px;
  background-color: white;
  padding: 5px 10px 5px 10px;
  line-height: calc(6vw - 15px);
}
/* 搜索图标具体位置 */
.header .headerTop p span {
  margin-right: 5px;
}
/*定位图标微调*/
.header .headerTop .location {
  margin: 0 10px;
}
.header .headerTop .location i {
  font-size: 22px;
  padding: 0 3px;
}
/* 用户图标相关 */
.header .headerTop .user {
  float: right;
  margin-right: 25px;
  font-size: 24px;
}
.img {
  border-radius: 50%;
  width: 6vw;
  vertical-align: middle;
}
</style>

